<template>
    <div class="place-follow-order-container layout-padding">
        <div class="mb15">
            <TableSearch :search="state.tableData.search" @search="onSearch" />

            <el-button size="default" type="success" class="ml10" @click="onOpenAddRecord('add')">
                <el-icon>
                    <ele-FolderAdd />
                </el-icon>
                新增工厂下单跟单记录
            </el-button>
        </div>

        <div class="place-follow-order-padding layout-padding-view layout-padding-auto">
            <Table ref="tableRef" v-bind="state.tableData" class="place-follow-order">

                <template v-slot:tableOperate="row">
                    <el-button size="small" text type="primary" @click="onOpenAddRecord('edit', row.row.id)">
                        编辑
                    </el-button>
                    <el-button size="small" text type="primary" @click="editPlaceFollowOrderProduct(row.row.id)">
                        细则
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="onTableDelRow(row.row)">
                        <template #reference>
                            <el-button size="small" text type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </Table>
        </div>
        <PlaceFollowOrderDialog ref="placeFollowOrderRef" @refresh="getTableData" />
    </div>
</template>

<script setup lang="ts" name="placeFollowOrder">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { usePlaceFollowOrderApi } from '/@/api/order/placeFollowOrder';
import { getTrueOrFalse, getPlatformName, getShippingMethod, getLogisticalPaymentStatus, getReceiveStatus } from '/@/utils/order';


// 引入 api 请求接口
const placeFollowOrderApi = usePlaceFollowOrderApi();

// 引入组件
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const PlaceFollowOrderDialog = defineAsyncComponent(() => import('/@/views/order/placeFollowOrder/component/placeFollowOrderDialog.vue'));

// 定义变量内容
const router = useRouter();
const tableRef = ref<RefType>();
const placeFollowOrderRef = ref();
const state = reactive<TableDemoState>({
    tableData: {
        data: [],
        header: [
            { key: 'poP', colWidth: '150', title: 'PO-P', type: 'text', isCheck: true },
            { key: 'poC', colWidth: '150', title: 'PO-C', type: 'text', isCheck: true },
            { key: 'platformNameStr', colWidth: '150', title: '平台', type: 'text', isCheck: true },
            { key: 'vendorName', colWidth: '150', title: '供货商', type: 'text', isCheck: true },
            { key: 'orderTime', colWidth: '150', title: '下单日期', type: 'text', isCheck: true },
            { key: 'pickupTime', colWidth: '150', title: '提货日期', type: 'text', isCheck: true },
            { key: 'shippingTime', colWidth: '150', title: '开船日期', type: 'text', isCheck: true },
            { key: 'actualWarehouseEntryTime', colWidth: '150', title: '实际入仓日期', type: 'text', isCheck: true },
            { key: 'taxIncludedStr', colWidth: '', title: '是否含税', type: 'text', isCheck: true },
            { key: 'taxRate', colWidth: '120', title: '税点(千分之)', type: 'text', isCheck: true },
            { key: 'vendorPrepaymentTime', colWidth: '150', title: '预付款日期', type: 'text', isCheck: true },
            { key: 'vendorRemainingPayment', colWidth: '150', title: '货款剩余', type: 'text', isCheck: true },
            { key: 'vendorRemainingPaymentDueTime', colWidth: '150', title: '货款剩余付款日期', type: 'text', isCheck: true },
            { key: 'amazonWarehouseCode', colWidth: '150', title: 'Amazon仓库代码', type: 'text', isCheck: true },
            { key: 'shipmentCode', colWidth: '150', title: '货件编码', type: 'text', isCheck: true },
            { key: 'shippingMethodStr', colWidth: '150', title: '发货方式', type: 'text', isCheck: true },
            { key: 'logisticalCode', colWidth: '150', title: '物流编码', type: 'text', isCheck: true },
            { key: 'logisticalName', colWidth: '150', title: '物流商', type: 'text', isCheck: true },
            { key: 'logisticalPaymentTime', colWidth: '150', title: '物流付款日期', type: 'text', isCheck: true },
            { key: 'logisticalPaymentStatusStr', colWidth: '150', title: '物流付款状态', type: 'text', isCheck: true },
            { key: 'logisticalPrice', colWidth: '150', title: '物流价格', type: 'text', isCheck: true },
            { key: 'reverseRatio', colWidth: '', title: '逆算比例（百分之）', type: 'text', isCheck: true },
            { key: 'customsFee', colWidth: '150', title: '报关费', type: 'text', isCheck: true },
            { key: 'inlandFreight', colWidth: '150', title: '内陆运费', type: 'text', isCheck: true },
            { key: 'actualTaxPaied', colWidth: '150', title: '实付税金', type: 'text', isCheck: true },
            { key: 'actualFreightPaied', colWidth: '150', title: '实付运费', type: 'text', isCheck: true },
            { key: 'estimatedDeliveryWarehouseTime', colWidth: '150', title: '预计送仓日期', type: 'text', isCheck: true },
            { key: 'actualDeliveryWarehouseTime', colWidth: '150', title: '实际送仓日期', type: 'text', isCheck: true },
            { key: 'receiveStatusStr', colWidth: '', title: '接收状态', type: 'text', isCheck: true },
            { key: 'batchNumber', colWidth: '', title: '批次', type: 'text', isCheck: true },
            { key: 'batchSecond', colWidth: '', title: '第几批', type: 'text', isCheck: true },
            { key: 'exchangeRate', colWidth: '', title: '汇率', type: 'text', isCheck: true },
        ],
        config: {
            total: 0,               // 列表总数
            loading: true,          // loading 加载
            isBorder: false,        // 是否显示表格边框
            isSerialNo: true,       // 是否显示表格序号
            isSelection: false,     // 是否显示表格多选
            isOperate: true,        // 是否显示表格操作栏
        },
        search: [
            {
                label: 'PO-P', prop: 'poP', placeholder: '支持模糊搜索', required: false, type: 'input', defaultVal: '',
            },
            {
                label: 'PO-C', prop: 'poC', placeholder: '支持模糊搜索', required: false, type: 'input', defaultVal: '',
            },
            {
                label: '供货商', prop: 'vendorName', placeholder: '支持模糊搜索', required: false, type: 'input', defaultVal: '',
            },
        ],
        param: {
            pageNum: 1,
            pageSize: 10,
        },
        printName: '工厂下单跟单管理',
    },
});

//搜索
const onSearch = (data: EmptyObjectType) => {
    state.tableData.param.type = data.type;
    getTableData();
};

// 初始化列表数据
async function getTableData() {
    state.tableData.config.loading = true;

    const result = await placeFollowOrderApi.queryPlaceFollowOrderList(state.tableData.param);
    if (result.data == null)
        return Promise.resolve(true);

    const placeFollowOrderList: PlaceFollowOrder[] = result.data.rows;
    const showPlaceFollowOrderList: EmptyObjectType<any>[] = [];
    placeFollowOrderList.forEach(item => {
        const platformNameStr = getPlatformName(item.platform);
        let taxIncludedStr = getTrueOrFalse(item.taxIncluded)
        const shippingMethodStr = getShippingMethod(item.shippingMethod);
        const logisticalPaymentStatusStr = getLogisticalPaymentStatus(item.logisticalPaymentStatus);
        const receiveStatusStr = getReceiveStatus(item.receiveStatus);

        const tmp = {
            platformNameStr: platformNameStr,
            taxIncludedStr: taxIncludedStr,
            shippingMethodStr: shippingMethodStr,
            logisticalPaymentStatusStr: logisticalPaymentStatusStr,
            receiveStatusStr: receiveStatusStr,
        }
        const showPlaceFollowOrderItem = { ...item, ...tmp };

        showPlaceFollowOrderList.push(showPlaceFollowOrderItem);
    });

    state.tableData.data = showPlaceFollowOrderList;
    state.tableData.config.total = result.data.total;
    setTimeout(() => {
        state.tableData.config.loading = false;
    }, 500);
};

// 打开编辑弹窗
const onOpenAddRecord = (type: string, placeFollowOrderId?: number) => {
    placeFollowOrderRef.value.openDialog(type, placeFollowOrderId);
};

// 打开订单细则页面
const editPlaceFollowOrderProduct = (placeFollowOrderId: number) => {
    const params: EmptyObjectType = { id: placeFollowOrderId };
    router.push({
        path: '/order/placeFollowOrder/instance',
        query: params,
    });
}

// 删除当前项回调
async function onTableDelRow(row: EmptyObjectType) {
    const param = {
        id: row.id,
    }
    await placeFollowOrderApi.deletePlaceFollowOrder(param);

    ElMessage.success(`删除${row.name}成功！`);
    getTableData();
};

// 页面加载时
onMounted(() => {
    getTableData();
});
</script>

<style scoped lang="scss">
.place-follow-order-container {
    .place-follow-order-padding {
        padding: 15px;

        .place-follow-order {
            flex: 1;
            overflow: hidden;
        }
    }
}
</style>
